<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>{$goods.name}-相册</title>
	<link rel="stylesheet" type="text/css" href="{$_s.theme_dir}css/common.css" />
	<link rel="stylesheet" type="text/css" href="{$_s.js_dir}jQuery/jquery.iviewer.css" />
	<link rel="stylesheet" type="text/css" href="{$_s.js_dir}jQuery/jcarousel/tango/skin.css" />
	<script type="text/javascript" language="JavaScript" charset="utf-8" src="{$_s.js_dir}jQuery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" language="JavaScript" charset="utf-8" src="{$_s.js_dir}jQuery/jquery-ui-1.10.2.custom.min.js"></script>
	<script type="text/javascript" language="JavaScript" charset="utf-8" src="{$_s.js_dir}jQuery/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" language="JavaScript" charset="utf-8" src="{$_s.js_dir}jQuery/jquery.iviewer.min.js"></script>
	<script type="text/javascript" language="JavaScript" charset="utf-8" src="{$_s.js_dir}jQuery/jquery.jcarousel.min.js"></script>
	{literal}
	<style type="text/css">
	#ibody { /* width:1200px; */ margin:auto; }
	h1 { height:60px; margin:0; text-align:center; line-height:60px; font-size:2em; }
	.viewer { /* width:1200px; height:600px; */ border:solid 1px #efefef; position: relative; }
	li { cursor:pointer; }
	</style>
	<!--[if lte IE 7]>
	<style type="text/css">
		ul li{
			display:inline;
			/*float:left;*/
		}
	</style>
	<![endif]-->
	{/literal}
</head>

<body>
	<div id="ibody">
		<h1><em><a id="btn_close" href="#">关闭</a></em>{$goods.name}</h1>

		<!-- 大图 START -->
		<div id="viewer" class="viewer"></div>
		<!-- 大图 END -->

		<ul id="mycarousel" class="jcarousel-skin-tango">
			{foreach from=$albums key=key item=album}
			<li rel="{$_s.up_dir}{$album.path}">
				<img src="{$_s.up_dir}thumb/92_70/{$album.path}" alt="thumbnail" />
			</li>
			{/foreach}
			{foreach from=$albums key=key item=album}
			<li rel="{$_s.up_dir}{$album.path}">
				<img src="{$_s.up_dir}thumb/92_70/{$album.path}" alt="thumbnail" />
			</li>
			{/foreach}
			{foreach from=$albums key=key item=album}
			<li rel="{$_s.up_dir}{$album.path}">
				<img src="{$_s.up_dir}thumb/92_70/{$album.path}" alt="thumbnail" />
			</li>
			{/foreach}
			{foreach from=$albums key=key item=album}
			<li rel="{$_s.up_dir}{$album.path}">
				<img src="{$_s.up_dir}thumb/92_70/{$album.path}" alt="thumbnail" />
			</li>
			{/foreach}
			{foreach from=$albums key=key item=album}
			<li rel="{$_s.up_dir}{$album.path}">
				<img src="{$_s.up_dir}thumb/92_70/{$album.path}" alt="thumbnail" />
			</li>
			{/foreach}
		</ul>
	</div>
	<script type="text/javascript">
	<!--
	{literal}
		var viewer = null;

		// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
		jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d){
			if ((t/=d) < (1/2.75)){
				return c*(7.5625*t*t) + b;
			} else if (t < (2/2.75)){
				return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
			} else if (t < (2.5/2.75)){
				return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
			} else {
				return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
			}
		};

		jQuery(function($){
			$('#mycarousel').jcarousel({
				visible		: 8
				,scroll		: 5						// 每次滚动5个
				//,easing		: 'BounceEaseOut'	// 缓冲类型
				,animation	: 1000
			});

			$('#mycarousel').find('li').click(function(){
				var _src = $(this).attr('rel');
				if(viewer){
					$("#viewer").iviewer('destroy');
				}
				viewer = $("#viewer").iviewer({
					src: _src
				});
			});

			var w = $(document).width();
			var h = $(document).height();
			console.log('w = ' + w);
			console.log('h = ' + h);
			if(w < 200){
				$('#ibody').css('width', '200px');
				$('#viewer').css('width', '200px');
			}else{
				if(w > 1300){
					$('#ibody').css('width', '1200px');
					$('#viewer').css('width', '1200px');
				}else{
					$('#ibody').css('width', w+'px');
					$('#viewer').css('width', (w-3)+'px');
				}
			}
			if(h < 200){
				$('#viewer').css('height', '200px');
			}else{
				$('#viewer').css('height', (h-150)+'px');
			}

			var _src = $('#mycarousel').find('li').first().attr('rel');
			viewer = $("#viewer").iviewer({
				src: _src
			});

			$('#btn_close').click(function(){
				window.close();
			})
		});
	{/literal}
	//-->
	</script>
</body>
</html>